<template>
  <el-dialog 
    class="simple-dialog"
    :title="tempData.id ? '修改' : '添加'"
    :visible.sync="tempVisible"
    width="800px"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    @close="close"
  >
    <el-form ref="formName" :rules="rules" :model="tempData" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名:" prop="name">
            <el-input v-model="tempData.name" placeholder="输入姓名" />
          </el-form-item> 
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号:" prop="idcard">
            <el-input v-model="tempData.idcard" placeholder="输入身份证号" maxlength="18"/>
          </el-form-item> 
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话:" prop="phone">
            <el-input v-model="tempData.phone" placeholder="输入联系电话" maxlength="11"/>
          </el-form-item> 
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别:" prop="sex" style="height: 51px;">
            <el-radio-group v-model="tempData.sex" placeholder="选择性别">
              <el-radio label="男">男</el-radio>
              <el-radio label="女">女</el-radio>
            </el-radio-group>
          </el-form-item> 
        </el-col>
        <el-col :span="12">
          <el-form-item label="年龄:" prop="age">
            <el-input v-model="tempData.age" placeholder="输入年龄"/>
          </el-form-item> 
        </el-col>
        <el-col :span="12">
          <el-form-item label="发行商:" prop="publisher">
            <el-select v-model="tempData.publisher" style="width: 100%" @change="getCard"
              placeholder="选择发行商" clearable>
              <el-option :label="item.name" :value="item.name" v-for="item in publisherList" :key="item.id"/>
            </el-select>
          </el-form-item> 
        </el-col>
        <el-col :span="12">
          <el-form-item label="激活卡号:" prop="activationCard">
            <el-select v-model="tempData.activationCard" style="width: 100%" placeholder="选择卡号"
               clearable @change="changeCard">
              <el-option :label="item.cardNum" :value="item.cardNum" v-for="item in cardList" :key="item.id"/>
            </el-select>
          </el-form-item> 
        </el-col>
        <el-col :span="12" style="height:51px;">
          <el-form-item label="保障期限:" >
            <el-input v-model="tempData.endTime" :disabled="true">
              <template slot="append">年</template>
            </el-input>
          </el-form-item> 
        </el-col>
        <el-col :span="12">
          <el-form-item label="激活时间:" prop="activationTime">
            <el-date-picker
              v-model="tempData.activationTime"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择激活时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="勾选时间:" prop="tickTime">
            <el-date-picker
              v-model="tempData.tickTime"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择勾选时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>  
        <el-col :span="12">
          <el-form-item label="投保情况:" prop="isInsure">
            <el-radio-group v-model="tempData.isInsure">
              <el-radio label="已投保">已投保</el-radio>
              <el-radio label="未投保">未投保</el-radio>
            </el-radio-group>
          </el-form-item> 
        </el-col>
        <el-col :span="12">
          <el-form-item label="结算情况:" prop="isSettle">
            <el-radio-group v-model="tempData.isSettle">
              <el-radio label="已结算">已结算</el-radio>
              <el-radio label="未结算">未结算</el-radio>
            </el-radio-group>
          </el-form-item> 
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注:" prop="isSettle">
            <el-input v-model="tempData.remake" placeholder="输入备注" type='textarea' rows="4"/>
          </el-form-item> 
        </el-col>
    </el-form>
    <span slot="footer" class="dalog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="saveUpdate('formName')">保存</el-button>
    </span>
  </el-dialog>
</template>

<script> 
  import cardApi from '@/api/system/card'
  import publisherApi from '@/api/system/publisher'
  import customerApi from '@/api/system/customer'
  export default {
    name: 'leaveAddEdit',
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      },
      data: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {
        tempVisible: false,
        projectLeave:0,
        publisherList:[],
        cardList:[],
        tempData: {
          id: null
        },
        rules: {
          name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
          phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
          idcard: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
          age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
          sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
          publisherId: [{ required: true, message: '请选择发行商', trigger: 'blur' }],
          activationCard: [{ required: true, message: '请选择卡号', trigger: 'blur' }], 
        },
        curUserRole: -1,
        inPulisherId:''
      }
    },
    watch: {
      dialogVisible: function(val) {
        this.tempVisible = val;
      },
      data: function(val) {
        if(val.publisher){
          this.getPublisher(val.publisher);
        }else{
          this.getPublisher()
        }
        this.tempData = JSON.parse(JSON.stringify(val));
      }
    },
    computed: {
      user() {
        return this.$store.state.user
      }
    },
    mounted() {
      this.user.roles.forEach(item => {
      if(item != 1 && item != 2){
        this.curUserRole = 3;
        if( this.user.publisherIds){
          this.inPulisherId = this.user.publisherIds
        }
      }
    })
    },
    methods: {
      //获取发行商
      getPublisher(){
        publisherApi.getPublisher({inPulisherId: this.inPulisherId}).then(res => {
          this.publisherList = res.data
        })
      },
      getPublisherCard(publisher){
        publisherApi.getPublisher().then(res => {
          this.publisherList = res.data
          this.getCard(publisher)
        })
      },  
      // 选择发行商
      getCard(publisher){
        var curSel = this.publisherList.filter(item => item.name == publisher)[0];
        // this.tempData.publisher = curSel.name; 
        cardApi.getCardByPublisher({publisherId: curSel.id}).then(res => {
          this.cardList = res.data
        })
      },
      // 选择卡号
      changeCard(val){
        var curSel = this.cardList.filter(item => item.cardNum == val)[0];
        this.tempData.endTime = curSel.term;
        this.tempData.cardId = curSel.id;
      },
      close() {
        this.$refs['formName'].clearValidate()
        this.$emit('close')
      },
      saveUpdate(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.tempData.id) {
              customerApi.update(this.tempData).then(res => {
                this.$message.success('更新成功')
                this.close()
                this.$emit('reloadTable',res.data)
              }).catch(() => {})
            } else {
              // if(this.curUserRole > -1){
              //   this.tempData.publisherId = this.user.publisherId;
              // }
              customerApi.save(this.tempData).then(res => {
                this.$message.success('添加成功')
                this.$emit('close');
                this.$emit('reloadTable',res.data)
              }) 
            }
          } else {
            return false
          }
        })
      }
    }
  }
</script>

<style lang="scss">

</style>
